<template>
    <section>
        <!--工具条-->
        <!-- <el-col :xs="6" :sm="6" :md="6" :lg="6" style="height:670px;width:20%;overflow-y :auto;overflow-x :auto">
          <el-tree highlight-current :data="treedata" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" :expand-on-click-node="true">
          </el-tree>
        </el-col> -->

        <div style="display:flex;justify-content:space-between;width:100%;height:100%">
        <div style="width:20%;position:relative;">
          <div  style="position:absolute;width:100%;height:100%;overflow-y:auto;overflow-x:auto">
             <el-col  style="overflow:hidden;width:auto" >
            <el-tree  highlight-current :data="treedata" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" :expand-on-click-node="true">
            </el-tree>
          </el-col>
          </div>
        </div>
       <div style="width:80%;">
        <el-col >
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input size="small" style="width:212px;" v-model.trim="filters.userCode" placeholder="请输入用户编码"></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-input size="small" style="width:212px;" v-model.trim="filters. branchCode" placeholder="请输入机构编码"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-select size="small" clearable style="width:212px;" v-model="filters.branchCode" placeholder="请选择选择机构">
                        <el-option label="总公司" value="0000"></el-option>
                        <el-option v-for="(item,index) in filters.items" :key="index" :label="item.codeCname" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input size="small" style="width:212px;" v-model.trim="filters.mobile" placeholder="请输入用户手机"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" content="提现时间" placement="top">
                        <el-date-picker size="small" style="width:212px;" v-model.trim="filters.Time" type="daterange" align="left" placeholder="请选择提现时间范围">
                        </el-date-picker>
                    </el-tooltip>
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-button size="small" type="primary" v-show="cashDetailExport" icon="upload2" @click="exportExcels">导出</el-button>
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-button size="small" type="primary" v-show="cashDetailQuery" icon="search" v-on:click="getLogs(true)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="Logs" stripe border :height="winHeight-188" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column prop="cashLog.payee" align="center" label="收款人姓名" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cashLog.phoneNo" align="center" label="用户手机号" min-width="125">
            </el-table-column>
            <el-table-column prop="cashLog.payeeAccount" align="center" label="银行卡号" min-width="130" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="policyNo" align="center" label="宝豆对应保单号" min-width="140" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cashLog.score" align="center" label="提现宝豆数量" width="130">
            </el-table-column>
            <el-table-column prop="score" align="center" label="使用积分数量" width="130">
            </el-table-column>
            <el-table-column prop="branchCode" align="center" label="保单对应机构" min-width="140" :formatter="formatBranch">
            </el-table-column>
            <el-table-column prop="order.riskCode" align="center" label="保单险种" min-width="120" show-overflow-tooltip :formatter="formatRisk">
            </el-table-column>
            <el-table-column prop="order.productName" align="center" label="保单产品" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="createTime" align="center" label="提现时间" min-width="170">
            </el-table-column>
            <el-table-column label="操作" fixed='right' width="100">
                <template scope="scope">
                    <el-button size="small" type="warning" v-show="detailCash" @click="reissue(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination style="float:right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 40, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-col>

        <!--详情界面-->
        <el-dialog title="提现积分详情" v-model="detailFormVisible" :close-on-click-modal="false">
            <el-form :model="detailForm" label-width="100px" ref="detailForm">
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" class="detaillabel">
                        <label class="detailLabel">ID:</label>
                        <span class="examineFonts">{{detailForm.id}}</span>
                    </el-col>

                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" class="detaillabel">
                        <label class="detailLabel">订单号:</label>
                        <span class="examineFonts">{{detailForm.businessNo}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">客户编号:</label>
                        <span class="examineFonts">{{detailForm.userCode}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">客户手机号:</label>
                        <span class="examineFonts">{{detailForm.phoneNo}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">状态:</label>
                        <span class="examineFonts">{{detailForm.status}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">金额:</label>
                        <span class="examineFonts">{{detailForm.money}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">积分:</label>
                        <span class="examineFonts">{{detailForm.scoreA}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">兑换比例:</label>
                        <span class="examineFonts">{{detailForm.rate}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">提现时间:</label>
                        <span class="examineFonts">{{detailForm.createTime}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">收款人姓名:</label>
                        <span class="examineFonts">{{detailForm.payee}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">身份证号:</label>
                        <span class="examineFonts">{{detailForm.idcard}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">币种:</label>
                        <span class="examineFonts">{{detailForm.currency}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">收款银行:</label>
                        <span class="examineFonts">{{detailForm.payeeBank}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">收款银行账号:</label>
                        <span class="examineFonts">{{detailForm.payeeAccount}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">积分来源ID:</label>
                        <span class="examineFonts">{{detailForm.reasonNo}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">使用积分数量:</label>
                        <span class="examineFonts">{{detailForm.score}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">积分来源机构:</label>
                        <span class="examineFonts">{{detailForm.branchCode}}</span>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">积分来源类型:</label>
                        <span class="examineFonts">{{detailForm.scoreType}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" class="detaillabel">
                        <label class="detailLabel">积分来源原因:</label>
                        <span class="examineFonts">{{detailForm.reason}}</span>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="detailFormVisible = false">关闭</el-button>
            </div>
        </el-dialog>
        </el-col>
        </div>
        </div>
    </section>
</template>

<script>
import util from '../../common/js/util'

import commons from '../../common/js/common'
//import NProgress from 'nprogress'
import { mapState, mapActions } from 'vuex'
import { cashToInScoreDetail, integralCashPatch, findBankListAll,treeNextChannelList,orderAuth } from '../../api/api';

export default {
    data() {
        return {
            filters: {
                Time: '',
                userCode: '',
                mobile: '',
                branchCode: '',
                items: ''
            },
            detailFormVisible: false,
            detailForm: {},
            Logs: [],
            comCode:'',
            lists: [],
            exportTotal: 0,
            restaurants: {
                selectdatas: '',
                resItems: [],
            },
            treedata: [],
            defaultProps: {
              children: 'children',
              label: 'label'
            },
            resBusinessNo: '',
            total: 0,
            page: 1,
            pageSize: 10,
            loading: '',
            // fullscreenLoading:false,
            listLoading: false,
            addLoading: false,
            addFormVisible: false,
            cashDetailExport: false,
            cashDetailQuery: false,
            detailCash: false,

            sels: [],//列表选中列
            userid: '',
            addFormRules: {

            },
            IsShow: false
        }
    },
    computed: mapState({
        clist: 'riskCodelist',
        blist: 'branchCodelist',
        winWidth: 'winWidth',
        winHeight: 'winHeight'
    }),
    methods: {
        cellStyle(row, rowIndex, columnIndex) {
        },
        formatCreateTime: function (row, column) {
            return commons.getDaytime(row.createTime, 1, false);
        },
        formatBranch: function (row, column) {
            return commons.Branchs(row.branchCode);
        },
        formatRisk: function (row, column) {
            if (row.order != null) {
                return commons.CodeName(this.clist, row.order.riskCode, 'RiskCode');
            } else {
                return null;
            }
        },
        formatStatus: function (row, column) {
            return commons.payeeStatus(row.status);
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getLogs(true);
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getLogs(true);
        },
        //获取列表
        getLogs(bool) {
            let para = new FormData();
            para.append("pageSize", bool ? this.pageSize : this.exportTotal);
            para.append("pageNumber", bool ? this.page : 1);
            // para.append("comCode", this.comCode);
            para.append("comCode", commons.isEmpty(this.comCode)?"00000000":this.comCode);
            para.append("userCode", this.filters.userCode);
            para.append("mobile", this.filters.mobile);
            para.append("branchCode", this.filters.branchCode);
            para.append("startDate", commons.changeTimes(this.filters.Time, 'start'));
            para.append("endDate", commons.changeTimes(this.filters.Time, 'end'));
            this.listLoading = bool;
            // this.fullscreenLoading = bool?false:true;
            if (!bool) {
                this.loading = this.$loading({
                    lock: true,
                    text: '正在导出',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            }
            cashToInScoreDetail(para).then((res) => {
                this.lists = res.data.result.content;
                this.total = res.data.result.totalElements;
                this.exportTotal = res.data.result.totalElements;
                this.listLoading = false;
                if (!bool) {
                    this.loading.close();
                    this.export2Excel();
                }
                else {
                    this.Logs = res.data.result.content;
                }
            });
        },
        handleNodeClick: function (data, node, obj) {
          this.comCode = data.id;
          let para = new FormData();
          para.append('branchNo', data.id);
          para.append('type', 'order');
          treeNextChannelList(para).then((res) => {
            if (res.data.result && res.data.success == true) {
              for (let i in res.data.result) {
                const newChild = { id: res.data.result[i].userCode, label: res.data.result[i].shopName, children: [] };
                if (!data.children) {
                  this.$set(data, 'children', []);
                }
                if (typeof (commons.GetByID(this.treedata, res.data.result[i].userCode)) == 'undefined') {
                  data.children.push(newChild);
                }
              }
            }
          });
          this.getLogs(true);
        },

        getSelectPerTree: function () {
          let para = new FormData();
          var userinfo = sessionStorage.getItem('user');
          if (userinfo) {
            var user = JSON.parse(userinfo);
          }
          var userid = user.userId;
          para.append('userId', userid);
          para.append('type', 'order');
          let modelTree = this.treedata;
          let leafTree = [];
          orderAuth(para).then((res) => {
            var data = res.data.result;
            if (data) {
              this.comCode=data[0].branchNo;
            }
            gettree(data, this.treedata);
            console.log(this.treedata)
          });
          function gettree(arr, trees) {
            for (var i in arr) {
              if (typeof (commons.GetByID(trees, arr[i].branchNo)) == 'undefined') {
                trees.push({
                  id: arr[i].branchNo,
                  label: arr[i].branchCname,
                  children: []
                });
              }
              if (arr[i].nextBranch) {
                let childTree = commons.GetByID(trees, arr[i].branchNo);
                gettree(arr[i].nextBranch, childTree.children);
              }
            }
          }
           // setTimeout(() => {
            this.getLogs(true);
          // }, 1000);
        },
        reissue: function (index, row) {
            this.detailFormVisible = true;
            this.detailForm = Object.assign({}, row);
            if (row.cashLog != null) {
                this.detailForm.id = row.cashLog.id;
                this.detailForm.userCode = row.cashLog.userCode;
                this.detailForm.phoneNo = row.cashLog.phoneNo;
                this.detailForm.status = commons.payeeStatus(row.cashLog.status);
                this.detailForm.scoreA = row.cashLog.score;
                // this.detailForm.createTime = commons.getDaytime(row.cashLog.createTime, 1, false);
                this.detailForm.payee = row.cashLog.payee;
                this.detailForm.idcard = row.cashLog.idcard;
                this.detailForm.payeeBank = row.cashLog.payeeBank;
                this.detailForm.payeeAccount = row.cashLog.payeeAccount;
                this.detailForm.money = row.cashLog.money;
                this.detailForm.rate = row.cashLog.rate;
            }
            this.detailForm.branchCode = commons.Branchs(row.branchCode);
            this.detailForm.scoreType = commons.consumeStatus(this.detailForm.scoreType);
        },
        //table导出excel
        exportExcels: function () {
            this.getLogs(false);
        },
        export2Excel: function () {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../vendor/Export2Excel');
                const tHeader = ['提现ID', '订单号', '客户编码', '客户手机号', '状态', '金额', '积分', '兑换比例', '提现时间', '收款人姓名', '身份证号', '币种', '收款银行', '收款银行账号', '积分来源ID', '使用积分数量', '积分来源机构', '积分来源类型', '积分来源原因',
                    // '提现宝豆数量', '宝豆对应保单号', '保单对应机构', '保单险种', '保单产品'
                ];
                let newList = [];
                const list = this.lists;
                for (let i = 0; i < list.length; i++) {
                    console.log(list[i].createTime);
                    let item = {
                        payee: "",
                        phoneNo: "",
                        payeeAccount: "",
                        score: list[i].score,
                        policyNo: list[i].policyNo,
                        branchCode: "",
                        riskCode: "",
                        productName: "",
                        createTime: list[i].createTime,
                        id: '', 
                        rate: '', 
                        idcard: '', 
                        currency: '', 
                        payeeBank: '', 
                        reasonNo: list[i].reasonNo, 
                        scoreType: '', 
                        reason: list[i].reason,
                        userCode: '',
                        businessNo: list[i].businessNo,
                        status: '',
                        money: '',
                        scoreA: '',

                    };
                    let obj = list[i];
                    if (typeof (obj.cashLog) != 'undefined' && obj.cashLog != null) {
                        let log = obj.cashLog;
                        if (typeof (log.payee) != 'undefined' && log.payee != null) {
                            item.payee = log.payee;
                        }
                        if (typeof (log.phoneNo) != 'undefined' && log.phoneNo != null) {
                            item.phoneNo = log.phoneNo;
                        }
                        if (typeof (log.payeeAccount) != 'undefined' && log.payeeAccount != null) {
                            item.payeeAccount = log.payeeAccount;
                        }

                        if (typeof (log.id) != 'undefined' && log.id != null) {
                            item.id = log.id;
                        }
                        if (typeof (log.status) != 'undefined' && log.status != null) {
                            item.status = commons.payeeStatus(log.status);
                        }
                        item.userCode = log.userCode != null ? log.userCode : null;
                        item.money = log.money != null ? log.money : null;
                        item.scoreA = log.score != null ? log.score : null;
                        item.rate = log.rate != null ? log.rate : null;
                        item.payeeBank = log.payeeBank != null ? log.payeeBank : null;
                        item.idcard = log.idcard != null ? log.idcard : null;
                        item.currency = log.currency != null ? log.currency : null;
                    }
                    if (typeof (obj.order) != 'undefined' && obj.order != null) {
                        let or = obj.order;
                        if (typeof (or.riskCode) != 'undefined' && or.riskCode != null) {
                            item.riskCode = commons.CodeName(this.clist, or.riskCode, "RiskCode");
                        }
                        if (typeof (or.productName) != 'undefined' && or.productName != null) {
                            item.productName = or.productName;
                        }
                    }
                    item.branchCode = commons.Branchs(obj.branchCode);
                    item.scoreType = commons.consumeStatus(obj.scoreType);
                    newList.push(item);
                }
                const filterVal = ['id', 'businessNo', 'userCode', 'phoneNo', 'status', 'money', 'scoreA', 'rate', 'createTime', 'payee', 'idcard', 'currency', 'payeeBank', 'payeeAccount', 'reasonNo','score', 'branchCode', 'scoreType', 'reason',];
                const data = this.formatJson(filterVal, newList);
                export_json_to_excel(tHeader, data, '提现扣减明细列表');
            })
        },
        formatJson: function (filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        btnShow: function () {
            let thisData = JSON.parse(sessionStorage.getItem('170'));
            let _this = this;
            $.each(thisData, function (i, j) {
                if (thisData[i] == "cashDetailExport") {
                    _this.cashDetailExport = true;
                }
                if (thisData[i] == "cashDetailQuery") {
                    _this.cashDetailQuery = true;
                }
                if (thisData[i] == "detailCash") {
                    _this.detailCash = true;
                }
            });
        },
    },
    mounted() {
        this.btnShow();
        // this.getLogs(true);
        this.getSelectPerTree();
        this.filters.items = this.blist.result;
    }
}

</script>
<style scoped>
.el-tree {
  border: 0;
}
.detailLabel {
  /*float:left;*/
  display: inline-block;
  text-align: right;
  width: 120px;
  color: #0b80da;
  font-weight: bold;
}
.detaillabel {
  margin-bottom: 10px;
}
</style>